<template>
  <div>
    <div class="jobtypeStatus">
      <el-button type="primary" class="span-hasEnded"
        :class="{'span-onlineBooking': jobtypeStatusIndex== (index==0 ? '' : index)}" @click="jobtypeStatus(index)"
        v-for="(item,index) in jobtypeStatusBtn" :key="index">{{jobtypeStatusBtn[index][1]}}</el-button>
    </div>
    <div class="jobFairList" v-for="(item,index) in listData" :key="index">
      <div>
        <h1 class="jobFair_name" @click="viewResume(item.id)">{{item.title}}</h1>
        <div class="jobFair_info">
          <div>
            <p class="jobFair_Holding">
              <span>
                <img src="@/assets/img/fair_time.png" alt="">
                举办时间：{{item.holdTime || '暂无'}}
              </span>
              <span>
                <img src="@/assets/img/tel.png" alt="">
                联系电话：{{item.phone || '暂无'}}
              </span>
            </p>
          </div>
        </div>
        <p class="jobFair_SponsorUnit">
          <span>主办单位：{{item.sponsor || '暂无'}}</span>
          <span>承办单位：{{item.organizer || '暂无'}}</span>
        </p>
        <p class="jobFair_remark">招聘会说明：{{item.remark || '暂无'}}</p>
      </div>
      <div class="jobFair_btnSee">
        <el-button type="primary" v-if="item.endStatus!=1" @click="viewResume(item.id)">查看详情</el-button>
        <el-button v-else type="info" disabled>已结束</el-button>
      </div>
      <span class="jobFair_roofPlacement" v-if="item.topStatus== 1">
        <img src="../../../assets/img/zhiding.png" alt="">
      </span>
    </div>
    <el-card class="noData" v-show="listData.length<=0">
      暂无数据
    </el-card>
    <div class="pagination">
      <el-pagination background size="10" layout="prev, pager, next" @current-change="currentChange" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { listPage } from '../../../api/jobFair';
export default {
  name: 'jobfair',
  data () {
    return {
      // 选择状态查询
      jobtypeStatusBtn: {
        0: ['span-onlineBooking', '全部'],
        1: ['span-onlineBooking', '即将开始'],
        2: ['span-hasEnded', '已结束']
      },
      jobtypeStatusIndex: 0,
      listData: [],
      total: 0,
      query: {
        title: '',
        reserveStatus: '',
        conditionState: '',
        auditStatus: '',
        createTime: '',
        ms: 1,
        page: 1,
        size: 10
      }
    }
  },
  created () {
    this.listPage()

  },
  methods: {
    // 状态
    jobtypeStatus (val) {
      if (val == 1) {
        this.jobtypeStatusIndex = 1
        this.jobtypeStatusVal = ''
        this.$set(this.query, 'auditStatus', 4);
      } else if (val == 2) {
        this.jobtypeStatusIndex = val
        this.jobtypeStatusVal = val - 1
        this.$set(this.query, 'auditStatus', 3);
      } else if (val == 0) {
        this.jobtypeStatusIndex = 0
        this.jobtypeStatusVal = 0
        this.$set(this.query, 'auditStatus', '');
      }
      this.query.page = 1
      this.listPage()
    },
    // 查看招聘会详情
    viewResume (id) {
      const { href } = this.$router.resolve({
        path: '/jobFairDetails',
        query: {
          id: id
        }
      })
      window.open(href, '_blank')
      // this.$router.push({
      //   path: '/jobFairDetails',
      //   query: {
      //     id: id
      //   }
      // })
    },
    currentChange (val) {
      console.log(val, 'currentChange 请求')
      this.$set(this.query, 'page', val);
      this.listPage();
    },
    // 查询列表
    listPage () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let that = this
      listPage(that.query).then((data) => {
        if (data.success) {
          data.data.records.map((item, i) => {
            // 时间字段拼接
            if (item.holdDateType == 1) {
              item.holdTime = (item.holdStartDate || '') + '    ' + (item.holdStartTime ? item.holdStartTime + ' - ' : '') + (item.holdEndTime || '')
            } else {
              item.holdTime = (item.holdStartDate ? item.holdStartDate + '-' : '') + (item.holdEndDate || '') + '     ' + (item.holdStartTime ? item.holdStartTime + '-' : '') + (item.holdEndTime || '')
            }
          })
          that.listData = data.data.records
          that.total = data.data.total
          loading.close()
          //   console.log(data.data)
        } else {
          loading.close()
        }
      })
    }
  }
}
</script>

<style scoped>
.jobFairList {
    width: 1104px;
    height: 96px;
    margin: 16px auto 0 auto;
    background: #ffffff;
    opacity: 1;
    justify-content: space-between;
    align-items: center;
    padding: 22px 48px;
    display: flex;
    position: relative;
}
/* 置顶 */
.jobFair_roofPlacement {
    width: 58px;
    height: 58px;
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    /* background: red;
     opacity: .3; */
}
.jobFair_name {
    font-size: 20px;
    color: #222222;
    line-height: 25px;
    position: relative;
    text-indent: 10px;
    cursor: pointer;
}
.jobFair_name:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    left: 0;
    top: 4px;
    background: #0093ff;
}
.jobFair_info {
    display: flex;
    justify-content: space-between;
    line-height: 45px;
}
.jobFair_Holding {
    height: 20px;
    font-size: 14px;
    display: inline-block;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.jobFair_Holding span:nth-child(1) {
    margin-right: 33px;
}

.jobFair_btnSee /deep/ .el-button {
    width: 216px;
    height: 46px;
}
.jobFair_Holding img {
    vertical-align: bottom;
}
.jobFair_btnSee /deep/ .el-button span {
    opacity: 1;
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}
.jobFair_SponsorUnit {
    display: inline-block;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.jobFair_remark {
    width: 620px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(85, 85, 85, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jobFair_SponsorUnit span:nth-child(1) {
    margin-right: 33px;
}
.noData {
    width: 1200px;
    margin: 22px auto 0;
    text-align: center;
}

.jobFair_SponsorUnit span:nth-child(1) {
    margin-right: 33px;
}
.jobtypeStatus {
    width: 1200px;
    margin: 0 auto;
}
.jobtypeStatus /deep/ .span-onlineBooking {
    background: #409eff !important;
    color: #fff !important;
}
.jobFair_btnSee /deep/ .span-booked,
.jobtypeStatus /deep/ .span-booked {
    background: rgba(177, 222, 255, 1);
}
.jobFair_btnSee /deep/ .span-hasEnded,
.jobtypeStatus /deep/ .span-hasEnded {
    background: rgba(204, 204, 204, 1);
}
.jobtypeStatus /deep/ .span-hasEnded {
    margin-left: 32px;
    border-radius: 0px;
    color: #000;
}
.jobFair_btnSee /deep/ .span-appointmentpassed {
    background: rgba(0, 155, 62, 1);
}
.jobFair_btnSee /deep/ .span-notPass {
    background: rgba(253, 78, 64, 1);
}
.jobFair_btnSee /deep/ .el-button--primary,
.jobtypeStatus /deep/ .el-button--primary {
    border-color: rgb(0, 0, 0, 0);
    padding: 10px 20px;
}
.pagination {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-pagination.is-background /deep/ .btn-next,
.el-pagination.is-background /deep/.btn-prev,
.el-pagination.is-background /deep/.el-pager li {
    background-color: #fff;
}
</style>